<template>
  <div class="wrapper">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/index' }">抢修任务</el-breadcrumb-item>
        <el-breadcrumb-item>{{ rushType[$route.query.type || 1] }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="screenForm" :formData="formData" ref="filterTitle">
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="yjqx" :paginationAtrrs="paginationAtrrs" :compRef="table.compRef" ref="gjxm"
        :columns="table.columns" :title="table.title" :actions="table.actions" :tableData="table.tableData"
        @pageChange="handleSizeChange" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
        :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" />
    </div>
    <!-- 弹窗信息 -->
    <LsdDialog :dialogConfig="dialogConfig" @handleBtn="handleBtn" @close="close">
      <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
        <FormData slot="slot1" :form="detailForm" :config="formConfig1" labelWidth="200px" />
        <DexTable slot="slot2" :config="tableConfig1" :data="detailForm.equList" :flex="false" :withPage="false" />
        <DexTable slot="slot3" :config="tableConfig2" :data="detailForm.equList" :flex="false" :withPage="false" />
        <DexTable slot="slot4" :config="tableConfig3" :data="detailForm.cbmTeams" :flex="false" :withPage="false" />
        <DexTable slot="slot5" :config="tableConfig4" :data="detailForm.cbmPrepareCars" :flex="false" :withPage="false" />
        <DexTable slot="slot6" :config="tableConfig5" :data="detailForm.cbmPrepareTools" :flex="false"
          :withPage="false" />
        <FormData slot="slot7" :form="detailForm" :config="formConfig2" labelWidth="200px" />
        <FormData slot="slot8" :form="detailForm" :config="formConfig3" labelWidth="200px" />
        <div slot="slot9">
          <div class="detailImg" v-if="detailForm.fj">
            <img :src="detailForm.fj" alt="">
          </div>
        </div>
      </LsdDialogTitle>
    </LsdDialog>
  </div>
</template>
<script>
import FormData from "./components/formData.vue";
import { formData, formConfig1, formConfig2, formConfig3, tableConfig1, tableConfig2, tableConfig3, tableConfig4, tableConfig5 } from "./config";
import DexTable from "@/components/DexTable.vue";
import { doPageList, doGetById } from "@/api/emergencyRepair.js";
export default {
  components: { FormData, DexTable },
  data() {
    return {
      rushType: {
        1: "输电抢修任务",
        2: "变电抢修任务",
        3: "配电抢修任务"
      },
      screenForm: {},
      formData,
      // 表格信息
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "yjqx",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "",
        actions: [{}],
        tableData: [],
        columns: [
          {
            prop: "rwdmc",
            label: "任务名称",
            align: "center"
          },
          {
            prop: "qxlx",
            label: "任务类型",
            align: "center",
            formatter: (row) => {
              const task_type = { 1: "检修", 2: "抢修" };
              return task_type[row.qxlx];
            }
          },
          {
            prop: "zy",
            label: "专业类型",
            align: "center",
            formatter: (row) => {
              const professional_type = { 1: "输电", 2: "变电", 3: "配电" };
              return professional_type[row.zy];
            }
          },
          {
            prop: "gznr",
            label: "任务内容",
            align: "center"
          },
          {
            prop: "fzrdw",
            label: "责任单位/部门",
            align: "center"
          },
          {
            prop: "jhkssj",
            label: "计划开始时间",
            align: "center"
          },
          {
            prop: "jhjssj",
            label: "计划结束时间",
            align: "center"
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            render: (h, { row }) => {
              const data = row;
              return (
                <div style='color:#3561fd;cursor:pointer;margin:0 10px' onClick={() => this.examine(data)}>
                  查看</div>);
            }
          }
        ],
        // 表格样式
        tableAttr: {
          border: true,
          fit: true,
          stripe: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      pagination: {
        pageNum: 1,
        pageSize: 10
      },
      // 弹窗信息
      dialogConfig: {
        title: "预警信息录入",
        isShow: false, // 弹窗显示隐藏
        btnList: []
      },
      // 折叠面板信息
      titleConfig: [
        {
          title: "任务单详情",
          name: "1",
          slot: "slot1"
        },
        {
          title: "抢修设备信息",
          name: "2",
          slot: "slot2"
        },
        {
          title: "已分配班组",
          name: "3",
          slot: "slot3"
        },
        {
          title: "队伍信息",
          name: "4",
          slot: "slot4"
        },
        {
          title: "车辆信息",
          name: "5",
          slot: "slot5"
        },
        {
          title: "工器具信息",
          name: "6",
          slot: "slot6"
        },
        {
          title: "抢修记录信息",
          name: "7",
          slot: "slot7"
        },
        {
          title: "故障分析信息",
          name: "8",
          slot: "slot8"
        },
        {
          title: "现场交底照片",
          name: "9",
          slot: "slot9"
        }
      ],
      activeNames: ["1", "2", "3", "4", "5", "6", "7", "8", "9"],
      detailForm: {
        ywdwmc: "",
        bmbzmc: "",
        bdzmc: "",
        rwly: "",
        qxdmc: "",
        qxdbh: "",
        gzlb: "",
        gzsj: "",
        qfrName: "",
        xkrName: "",
        bzrmc: "",
        bzsj: "",
        gznr: "",
        tdfw: "",
        qxztqkjs: "",
        xfqk: "",
        xqghsbwcqk: "",
        yhzlxmwcqk: "",
        ztpjzgxmwcqk: "",
        kzcsjxybjy: "",
        sdsj: "",
        jlrmc: "",
        jlsj: "",
        bgdmc: "",
        bgdbh: "",
        // bzrmc: "",
        // bzsj: "",
        gzgs: "",
        jcclqk: "",
        yyfx: "",
        nextWorkArrange: "",
        blwt: "",
        fcjjy: "",
        equList: [], // 抢修设备
        cbmTeams: [], // 队伍
        cbmPrepareCars: [], // 车辆
        cbmPrepareTools: [] // 工器具
      },
      formConfig1,
      formConfig2,
      formConfig3,
      tableConfig1,
      tableConfig2,
      tableConfig3,
      tableConfig4,
      tableConfig5
    };
  },
  watch: {
    "$route.query.type": {
      handler(val) {
        this.table.title = this.rushType[val];
        this.doPageList();
      },
      immediate: true
    }

  },
  methods: {
    async doPageList(data) {
      const params = {
        zy: this.$route.query.type || 1,
        ...this.pagination,
        ...data
      };
      const res = await doPageList(params);
      if (res) {
        this.table.tableData = res.data;
        this.paginationAtrrs.total = res.total;
      }
    },
    // 重置
    reset() {
      this.screenForm = {};
      this.doPageList();
    },
    // 检索
    query() {
      this.doPageList(this.screenForm);
    },
    async examine(row) {
      const res = await doGetById(row.objid);
      // const res = await doGetById("1416626383618080");
      if (res) {
        const { analysisList, xsjls, equList, cbmTeams, cbmPrepareCars, cbmPrepareTools, ...form } = res;
        this.detailForm = Object.assign(this.detailForm, xsjls[0], analysisList[0], form);
        console.log(this.detailForm.bzrmc);
        this.detailForm.equList = equList || [];// 抢修设备//班组
        this.detailForm.cbmTeams = cbmTeams || [];// 队伍
        this.detailForm.cbmPrepareCars = cbmPrepareCars || [];// 车辆
        this.detailForm.cbmPrepareTools = cbmPrepareTools || [];// 工器具
        this.dialogConfig.isShow = true;
        console.log(this.detailForm);
      }
    },
    handleBtn(item) {
      this[item.id]();
    },
    close() {
      this.dialogConfig.isShow = false;
    },
    handleSizeChange(val) {
      this.pagination.pageNum = val["current-page"];
      this.pagination.pageSize = val["page-size"];
      this.doPageList();
    }
  }
};
</script>
<style lang="less" scoped>
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;

  :deep(.el-breadcrumb) {
    font-size: 16px;
  }

  .location-wrap {
    line-height: 25px;
  }
}

.box {
  flex: 1;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

.detailImg {
  >img {
    width: 100px;
    height: 100px;
  }
}
</style>
